@extends('front.layouts.app')
@section('style')
	<style>
		.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background: orange;
    color: #fff;
    border-radius: none;
    border: none;

}
	</style>
@endsection
@section('content')

	
	<section class="mt-2">
		<div class="container ">  
			 {{-- @include('front.index.cuxiao')  --}}
			 <div class="row mt-3" > 
 				<div class="col-lg-12">
 					<div id="carouselExampleControls" class="carousel carousel-hot slide"  data-ride="carousel-hot">
				  <div class="carousel-inner">
				    @foreach($hots->chunk(4) as $l=>$hotz)
					    <div class="carousel-item  @if($l == 0) active @endif ">
					    	 <div class="row">
								@foreach($hotz as $hot)

								    <div class="col"  >
								     <div class="mb-3 cuxiao show-info" style="height: 280px;border-top:2px solid red;">
									<a href="{{ route('details',$hot->pro_code) }}">
		                              <div class="card border-right-0 border-left-0 border-bottom-0" >
		                              	<div class="card-img-top " style="position: relative; margin: 0 auto 22px;width: 160px;">
		                              		<img style="width: 160px;height: 160px;" class="bigImg" src="{{asset('productpics/').'/'.$hot->pro_img}}">
		                              	</div> 
		                              	<div style="position: absolute;top: 5px;right: 10px"><img width="30px" src="{{ asset('home/images/hot.png') }}"></div> 
		                              	<div style="" class="col-lg-12 text-left zzc">
		                              		<p class="text-center center-block text-secondary" title=" 
		                              			{{$hot->pro_name}}
		                              		">
		                              			<span class="text-center">
		                              				 {{str_limit($hot->pro_name, $limit = 20, $end = '...')}}<br>
		                              				 
		                              			</span>
		                              		</p>
		                              		<span class="text-orange text-center">
		                              			<p>{{$hot->pro_prices}}起</p>
		                              		</span>
		                              	</div> 
		                              </div>
		                          </a>
							    </div> 
								    </div>  
								@endforeach
							  </div>
						</div>
			 		@endforeach 
				  </div> 
				</div>
 				</div>
			 		<script>
			 			$('.carousel-hot').carousel({
			 			  interval: 5000
			 			}) 
			 		</script>
			 </div>
			<div class="row mt-2"> 
				@foreach($topCateFloors as $floor)
                 <div class="col-lg-12 louti" id="louti{{$loop->index+1}}" @if($loop->index > 0) style="margin-top: 15px;" @endif > 
                 	<h3 class="floor-hd" style="background-color: @if(!$floor->floor_color) #498bad @else {{$floor->floor_color}} @endif">
                 		<i class="box_hd_arrow"></i>
                 		<i class="box_hd_dec"></i>
                 		<div class="hd-tit">{{$floor->name}}</div>

                 	<ul class="nav nav-tabs float-right" id="myTab" role="tablist" style="margin: 0">
						<?php $subPro = $floor->subcate()->where('is_floor', '=', true)->get();?>
                 		@foreach( $subPro as $vf)
							<li class="nav-item">
						    <a class="nav-link text-white @if($loop->index == 0) active @endif" id="{{$vf->slug}}-tab" data-toggle="tab" href="#{{$vf->slug}}" role="tab" aria-controls="{{$vf->slug}}"  >{{$vf->name}}</a>
						  </li>
                 		@endforeach
					  
					 
					</ul>
                 	</h3> 
					<div class="row m-0 ">
                 	

                 	<div class="col-lg-9 m-0 "> 
					<div class="tab-content" id="myTabContent"> 
					  @foreach($subPro as $sp)
					   

					  		<div class="tab-pane fade  @if($loop->index == 0) show active @endif" id="{{$sp->slug}}" role="{{$sp->slug}}" aria-labelledby="{{$sp->slug}}">
					  			@foreach($sp->products()->where('is_floor',true)->get()->chunk(4) as $pszs)
									
									<div class="row">
										@foreach($pszs as $pz)

										<div class="col-lg-3 p-0 m-0">
											<div class="card">

													<div class="card-body">  
													    <p class="card-text"><small class="text-muted">
													    	<a class="text-secondary" href="{{route('details',$pz->pro_code)}}">{{ str_limit($pz->pro_name, $limit = 20, $end = '...') }}</a>
													    </small></p>
													    <h6 class="card-title">￥{{$pz->pro_prices}}</h6>
 
													 <img class="card-img-bottom" src="{{asset('productpics/').'/'.$pz->pro_img}}"  alt="Card image cap">  
												  </div>
											</div>
										</div>

										@endforeach
									</div>
									

					  			@endforeach
						  </div>
 

					  @endforeach
					 
					</div>

                 	</div>  

                 	<div class="col-lg-3 p-0 m-0" style="border: 1px solid #eee; height: 550px;overflow: hidden; ">
                 		<div id="carouselExampleIndicators"  class="flex-column carousel slide" data-ride="carousel">
                 			<?php $fps = $floor->products()->where('is_floor','=',true)->limit(3)->get();?>
                 		  <ol class="carousel-indicators">
                 		    @foreach( $fps as $fl=>$vl)
                 		  	@if($vl->is_floor) 
	                 		    <li data-target="#carouselExampleIndicators" data-slide-to="{{$loop->index}}" class="@if($loop->index == 0) active @endif"></li>
	                 		@endif 
                 		    @endforeach
                 		  </ol>
                 		  <div class="carousel-inner">
							@foreach($fps as $flp=>$vlp)
							@if($vlp)
	                 		    <div class="carousel-item @if($flp == 0) active @endif">
									<a href="{{route('details',$vlp->pro_code)}}">

		                 		      <img class="d-block w-100" width="100%" height="100%" src="{{asset('productpics/').'/'.$vlp->pro_img}}" alt="{{$vlp->pro_name}}">
		             		        </a>

	                 		    </div> 

                 		    @endif
                 		    @endforeach

                 		  </div>
                 		  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                 		    <i class="fa fa-angle-left fa-2x" style="color: rgba(0,0,0,.5);"></i>
                 		  </a>
                 		  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                 		    <i class="fa fa-angle-right fa-2x" style="color: rgba(0,0,0,.5);"></i>
                 		  </a>
                 		  
                 		</div> 
     		  			{{-- <div class="div{{$loop->index}}">  
     		  				@foreach($floor->subcate as $sc)
	     		  			    <a href="">{{$sc->name}}</a>    
     		  			    @endforeach
     		  			</div>  --}}
     		  			 <div class="taglist" id="tags">
     		  			 	<?php $classNum = collect([0,1,2,3,4,5,6,7,8,9]);?>
     		  			 	@foreach($floor->subcate as $sp)
								<a target="_blank" href="{{ route('pcate',$sp->slug) }}" class="size{{$classNum->random()}}">
									{{$sp->name}}
									
								</a>
								@foreach($sp->subcate as $psub)
									<a target="_blank" href="{{ route('pcate',$psub->slug) }}" class="size{{$classNum->random()}}">
									{{$psub->name}}
									
								</a>
								@endforeach
							@endforeach	
						</div>
                 	</div> 

                 </div>

                 </div>
		

                 @endforeach
			</div>
		</div>
	</section>
	<script type="text/javascript">
	
		$(document).ready(function(){
			/*多彩tag*/
			var tags_a = $("#tags").find("a");
			tags_a.each(function(){
				var x = 9;
				var y = 0;
				var rand = parseInt(Math.random() * (x - y + 1) + y);
				$(this).addClass("size"+rand);
			});
			
		});

</script>
@endsection